<template>
  <div v-dialogDrag>
    <el-dialog
      title="清算日历上传"
      v-model="dialogVisible"
      width="25%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form
        size="small"
        label-width="120px"
        label-position="right"
        ref="formRef"
        :rules="rules"
        :model="ruleForm"
      >
        <el-form-item label="所属年份" prop="belongYear">
          <el-date-picker
            v-model="ruleForm.belongYear"
            type="year"
            value-format="YYYY"
            placeholder="请选择所属年份"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="有效期" prop="periodValidity">
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="ruleForm.periodValidity"
          ></el-date-picker
        ></el-form-item>
        <el-form-item label="说明">
          <el-input placeholder="请输入说明" v-model="ruleForm.explain" />
        </el-form-item>
        <el-form-item label="上传附件" prop="file">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :file-list="fileList"
            :on-change="handleSuccess"
            :auto-upload="false"
          >
            <el-button size="small" type="success">选取上传文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <div class="flex justify-end">
            <el-button type="primary" @click="handleOk">提交</el-button>
            <el-button @click="handleClose">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { rulesAlert } from '../config'
import { ElForm, ElMessage } from 'element-plus'
import { toFormData } from '@/assets/common'
import { $basicData } from '@/service/basicData'

export default defineComponent({
  name: 'ImportCalendar',
  emits: ['handleClose'],
  setup(props, { emit }) {
    // region 初始化参数
    const dialogVisible = ref(true)
    const fileList = ref([])
    const ruleForm = reactive({
      belongYear: '',
      periodValidity: [],
      explain: '',
      file: {},
      periodValidityStart: '',
      periodValidityEnd: ''
    })
    const rules = rulesAlert
    // endregion

    // region 提交
    const formRef = ref<InstanceType<typeof ElForm>>()
    const handleOk = () => {
      formRef.value?.validate(async (flag) => {
        if (!flag) return
        ruleForm.periodValidityEnd = ruleForm.periodValidity[1]
        ruleForm.periodValidityStart = ruleForm.periodValidity[0]
        try {
          const { message, code } = await $basicData.uploadCalendar(
            toFormData(ruleForm)
          )
          if (code !== 200) return ElMessage.error(message)
          ElMessage.success(message)
          emit('handleClose', true)
        } catch (e) {
          console.log(e)
        }
      })
    }
    // endregion

    // region 关闭
    const handleClose = () => {
      emit('handleClose')
    }
    // endregion

    // region 文件上传
    const handleSuccess = (response: any) => {
      ruleForm.file = response.raw
      fileList.value = []
      ;(fileList.value as any[]).push(response)
    }
    // endregion

    return {
      dialogVisible,
      rules,
      ruleForm,
      formRef,
      fileList,
      handleClose,
      handleOk,
      handleSuccess
    }
  }
})
</script>

<style scoped lang="less">
/deep/.el-date-editor {
  width: 100% !important;
}
</style>
